<template>
  <div>
    <div>
      功能说明：例如将【斗鱼->热门网游->荒野行动Plus】这个标签的数据采集到【斗鱼->荒野行动】直播类型
    </div>
    <el-button type="primary" @click="showEditor()">添加标签</el-button>
    <el-button type="success" @click="load">刷新</el-button>
    <el-button type="danger" @click="remove">删除</el-button>
    <tag-editor ref="editor" @change="editorChange"/>
    <el-table :data="list" @selection-change="select">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="platform.name" label="平台"/>
      <el-table-column prop="type.name" label="克隆到类型"/>
      <el-table-column prop="name" label="标签">
        <template slot-scope="scope">
          <a :href="scope.row.url" target="_blank" :title="scope.row.url">{{scope.row.name}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="key" label="关键值"/>
    </el-table>
  </div>
</template>

<script>
  import TagEditor from './tagEditor';

  export default {
    name: 'tagList',
    components: {TagEditor},
    data() {
      return {
        selected: [],
        list: [],
      };
    },
    methods: {
      async load() {
        const res = await this.$http.get('/api/tags');
        this.list = res.data;
      },
      showEditor(data) {
        this.$refs.editor.showDialog(data);
      },
      editorChange() {
        this.load();
      },
      async remove() {
        if (this.selected.length === 0)
          return this.$message({message: '请选择标签', type: 'error'});
        const sure = await new Promise(resolve => {
          this.$confirm('确认删除？', {type: 'warning'}).then(() => resolve(true)).catch(() => resolve(false));
        });
        if (!sure)
          return;
        const res = await this.$http.post('/api/tags/remove', this.selected.map(tag => tag.id));
        if (res instanceof Error)
          return this.$alert(res.message, {type: 'error'});
        this.$message({message: '删除成功', type: 'success'});
        this.load();
      },
      select(selected) {
        this.selected = selected;
      },
    },
    mounted() {
      this.load();
    },
  };
</script>

<style scoped lang="scss">

</style>